<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时问答 - 一问一答</title>
    <!-- 引入 jQuery -->
    <script src="jquery.min.js"></script>
    <style>
        /* 简单样式 */
        #responseArea {
            width: 600px;
            height: 400px;
            overflow-y: auto;
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 20px;
            display: flex;
            flex-direction: column;
        }

        .message {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .question, .answer {
            max-width: 48%; /* 调整宽度以适应两侧布局 */
            padding: 10px;
            border-radius: 5px;
        }

        .question {
            background-color: #f0f8ff;
            text-align: right;
        }

        .answer {
            background-color: #e0f7fa;
            text-align: left;
        }
    </style>
</head>

<body>
<div style="margin: 20px;">
    <h1>Ask Qwen Plus</h1>
    <input id="questionInput" placeholder="请输入您的问题" style="width: 500px; padding: 5px;" type="text">
    <button id="askButton" style="padding: 5px 10px;">提问</button>
    <div id="responseArea"></div>
</div>

<script>
    $(document).ready(function () {
        const ws = new WebSocket('ws://localhost:8089/ws-ask'); // 替换为您的WebSocket服务器地址

        $('#askButton').on('click', sendQuestion);
        $('#questionInput').on('keydown', function (event) {
            if (event.which === 13) {
                event.preventDefault();
                sendQuestion();
            }
        });

        function sendQuestion() {
            const question = $('#questionInput').val();
            if (!question) {
                alert('请输入一个问题');
                return;
            }

            // 显示问题
            displayMessage({type: 'question', content: '> ' + question});

            ws.send(JSON.stringify({
                question: question,
                userId: 1
            }));
        }

        ws.onmessage = function (event) {
            const answer = event.data;

            // 直接显示回答
            displayMessage({type: 'answer', content: answer});
        };

        function displayMessage(messageObj) {
            const messageContainer = $('<div class="message"></div>');
            let contentElement;

            if (messageObj.type === 'question') {
                contentElement = $('<div class="question"></div>').text(messageObj.content);
            } else if (messageObj.type === 'answer') {
                contentElement = $('<div class="answer"></div>').html(basicMarkdownToHtml(messageObj.content));
            }

            messageContainer.append(contentElement);
            $('#responseArea').append(messageContainer);
            $('#responseArea').scrollTop($('#responseArea')[0].scrollHeight); // 滚动到底部
        }

        // 更强的基础Markdown到HTML转换函数
        function basicMarkdownToHtml(mdText) {
            let html = mdText.replace(/^(#{1,6})\s*(.*?)\s*$/gm, function (match, p1, p2) {
                const level = p1.length;
                return '<h' + level + '>' + p2 + '</h' + level + '>';
            }).replace(/(\*\*|__)(.*?)\1/g, '<strong>$2</strong>') // Bold
                .replace(/(\*|_)(.*?)\1/g, '<em>$2</em>') // Italic
                .replace(/\n/g, '<br>'); // Newline to <br>
            return html;
        }
    });
</script>
</body>
</html>